<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<title>欢迎</title>
	<style>
		body {
			width: 100%;
			height: 100%;
			margin: 0;
			padding: 0;
			overflow: hidden;
		}
		#app{
			background-color: #f9f9f9;
		}

		iframe {
			border: none;
			width: 100%;
			height: calc(100vh - 4.5rem);
		}


		.main_db {
			position: fixed;
			bottom: 0;
			width: 100%;
			border-top: 1px #7e7676 solid;
			overflow: hidden;
			background-color: #FFFFFF;
			margin-top: 22px;
		}

		.main_db_div {
			background: #FFFFFF;
			border-radius: 8px;
			margin: 0 2%;
			font-size: 12px;
			overflow: hidden;
			padding: 0 3%;
		}


		.main_db_div ul {
			width: 100%;
			margin: 0;
			padding: 0;
			display: flex;
			justify-content: space-around;
		}

		.main_db_div ul a {
			width: 20%;
			text-decoration: none;
		}

		.main_db_div ul li {
			width: 100%;
			background-color: #FFFFFF;
			border-radius: 5px;
			margin: 8px 2.5%;
			/* float: left; */
			display: flex;
			align-items: center;
			flex-direction: column;
			transition: all 1s ease;
		}

		.st-products-list ul li {
			width: 100%;
			background-color: #FFFFFF;
			border-radius: 5px;
			margin: 15px 2.5% 0;
			/* float: left; */
			transition: all 1s ease;

		}

		.main_db_div ul li div {
			width: 100%;
			text-align: center;
			font-size: 12px;
			color: #000;
		}

		.main_db_div ul li div img {
			width: 36px;
		}

		ul,
		li {
			list-style: none;
		}
	</style>
</head>

<body>
	<div id="app">
		<div class="main">
			<iframe name="iframe" id="iframe" style="overflow-y: auto;"></iframe>
		</div>
		<!--底部-->
		<div class="main_db">
			<div class="main_db_div">
				<ul>
					<a href="intro.html" target="iframe">
						<li @click="id=0">
							<div><img :src="img(0)" /></div>
							<div>学校简介</div>
						</li>
					</a>
					<!-- <a href="chat_addresslist.html" target="iframe">
						<li @click="id=1">
							<div><img :src="img(1)" /></div>
							<div>通讯录</div>
						</li>
					</a>
					<a href="classes_circle.html" target="iframe">
						<li @click="id=2">
							<div><img :src="img(2)" /></div>
							<div>班级圈</div>
						</li>
					</a> -->
					<a id="center" target="iframe">
						<li @click="id=1">
							<div><img :src="img(1)" /></div>
							<div>个人中心</div>
						</li>
					</a>
				</ul>
			</div>
		</div>

	</div>
	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>

	<script src="/wechat/js/wx.js"></script>

	<script>
		new Vue({
			el: '#app',
			data: {
				id: 1
			},
			methods: {
				img: function (id) {
					return 'image/img/s' + (id +1) + (id == this.id ? 'h' : '') + '.png';
				}
			},
			mounted: function () {
				var iframe = document.getElementById('iframe');
				var center = document.getElementById('center');

				iframe.onload = function () {
					document.title = this.contentWindow.document.title;
					var user = sessionStorage['hxt-user'];
					if (user == 'student') center.href = '/wechat/student/student_center.html';
					if (user == 'teacher') center.href = '/wechat/teacher/teacher_center.html';
				}

				var href = location.search.match(/\bhref=([^&]+)/);
				href = href && href[1];
				href = href && decodeURIComponent(href);
				iframe.src = href;
			},
		})
	</script>

</body>

</html>